<template>
  <div class="app">
    <div class="title">我的待办</div>
    <a-row>
      <a-col :span="8">
        <span style="width:">案件编号：</span>
        <a-input placeholder="请输入案件编号" v-model="queryForm.eventId"/>
      </a-col>
      <a-col :span="8">
        <span>模糊搜索：</span>
        <a-input placeholder="模糊搜索" v-model="queryForm.search"/>
      </a-col>
      <a-col :span="8">
        <span>上报人电话：</span>
        <a-input placeholder="上报人联系电话" v-model="queryForm.reporterPhone"/>
      </a-col>
      
      <a-col :span="8">
        <span>紧急程度：</span>
        <a-select v-model="queryForm.urgencyLevel" placeholder="请选择紧急程度" >
          <a-select-option v-for="(item, index) in urgencyLevelList" :key="index" :value="item.value" >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <span>办理状态：</span>
        <a-select v-model="queryForm.eventStatus" placeholder="请选择办理状态" >
          <a-select-option v-for="(item, index) in eventList" :key="index" :value="item.value" >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <span>受理状态：</span>
        <a-select v-model="queryForm.businessStatus" placeholder="请选择受理状态" >
          <a-select-option v-for="(item, index) in businessList" :key="index" :value="item.value" >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <span>问题来源：</span>
        <a-select  v-model="queryForm.issueSource" placeholder="请选择问题来源" >
          <a-select-option
              v-for="d in issueSourceList"
              :key="d.value"
              :value="d.label"
            >
              {{ d.label }}
            </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <span>问题来源：</span>
        <a-select  v-model="queryForm.issueType" placeholder="请选择问题类型" >
          <a-select-option
              v-for="d in issueTypeList"
              :key="d.value"
              :value="d.label"
            >
              {{ d.label }}
            </a-select-option>
        </a-select>
      </a-col>
      <a-col :span="8">
        <a-button type="primary" @click="search()"> 搜索 </a-button>&emsp;&nbsp;
        <a-button @click="reset()">重置</a-button>
      </a-col>
    </a-row>
    <a-row>
      <a-tabs v-model="queryForm.pqStatus" @change="changeTab">
        <a-tab-pane
          v-for="item in menuList"
          :key="item.value"
          :tab="item.label"
        >
        </a-tab-pane>
        </a-tabs>
        <a-spin :spinning="loading">
          <a-table :columns="columns" :data-source="tableData" rowKey="key" :scroll="{ x: 1800 }"  :pagination="false" >
          <span slot="action" slot-scope="text, record">
            <a-button type="link" @click="handleOperation(record, 'Detail')">案件详情 </a-button>
          </span>
          
        </a-table>
        <div class="page_box">
          <a-pagination
            v-model="queryForm.offset"
            :page-size-options="['20', '30', '40', '50']"
            :total="total"
            show-size-changer
            :page-size="queryForm.current"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
            :show-total="(total) => `共 ${total} 条`"
          ></a-pagination>
        </div>
      </a-spin>
      
    </a-row>
    <a-modal
      title="办理"
      :visible="dialogVisible"
      width="40%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible = false"
      @ok="dialogVisible = false"
    >
      <a-row style="padding: 15px">
        <a-col :span="12">
          工作名称：
          <a-input v-model="data.name" placeholder="工作名称" />
        </a-col>
        <a-col :span="12">
          文号：&emsp;&emsp;<a-input v-model="data.id" placeholder="文号" />
        </a-col>
        <a-col :span="12">
          工作类型：
          <a-input v-model="data.lx" placeholder="工作类型" />
        </a-col>
        <a-col :span="12">
          发文单位：
          <a-input v-model="data.dw" placeholder="发文单位" />
        </a-col>
        <a-col :span="12">
          联系人：&emsp;<a-input v-model="data.lxr" placeholder="联系人" />
        </a-col>
        <a-col :span="12">
          联系电话：
          <a-input v-model="data.dh" placeholder="联系电话" />
        </a-col>
        <a-col :span="12">
          派发时间：
          <a-input v-model="data.startTime" placeholder="派发时间" />
        </a-col>
        <a-col :span="12">
          截止时间：
          <a-input v-model="data.endTime" placeholder="截止时间" />
        </a-col>
        <a-col :span="24">派发意见</a-col>
        <a-col :span="24">
          <a-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </a-input>
        </a-col>
        <a-col :span="24">工作附件（图片、文档等）</a-col>
        <a-col :span="24">
          <!-- <a-upload
            name="avatar"
            list-type="picture-card"
            class="avatar-uploader"
            :show-upload-list="false"
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload> -->
        </a-col>
        <a-col :span="24">工作反馈表单</a-col>
        <a-col :span="24">
          <a-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </a-input>
        </a-col>
        <a-col :span="24">报送文件</a-col>
        <a-col :span="24">
         
        </a-col>
      </a-row>
    </a-modal>
    <a-modal
      title="查看"
      :visible="dialogVisible1"
      width="40%"
      ok-text="确认"
      cancel-text="取消"
      @cancel="dialogVisible1 = false"
      @ok="dialogVisible1 = false"
    >
      <a-row style="padding: 15px">
        <a-col :span="12">
          工作名称：
          <a-input v-model="data.name" disabled placeholder="工作名称" />
        </a-col>
        <a-col :span="12">
          文号：&emsp;&emsp;<a-input
            v-model="data.id"
            disabled
            placeholder="文号"
          />
        </a-col>
        <a-col :span="12">
          工作类型：
          <a-input v-model="data.lx" disabled placeholder="工作类型" />
        </a-col>
        <a-col :span="12">
          发文单位：
          <a-input v-model="data.dw" disabled placeholder="发文单位" />
        </a-col>
        <a-col :span="12">
          联系人：&emsp;<a-input
            v-model="data.lxr"
            disabled
            placeholder="联系人"
          />
        </a-col>
        <a-col :span="12">
          联系电话：
          <a-input v-model="data.dh" disabled placeholder="联系电话" />
        </a-col>
        <a-col :span="12">
          派发时间：
          <a-input v-model="data.startTime" disabled placeholder="派发时间" />
        </a-col>
        <a-col :span="12">
          截止时间：
          <a-input v-model="data.endTime" disabled placeholder="截止时间" />
        </a-col>
        <a-col :span="24">派发意见</a-col>
        <a-col :span="24">
          <a-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            disabled
            v-model="textarea"
          >
          </a-input>
        </a-col>
        <a-col :span="24">工作附件（图片、文档等）</a-col>
        <a-col :span="24">
          
        </a-col>
        <a-col :span="24">工作反馈表单</a-col>
        <a-col :span="24">
          <a-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </a-input>
        </a-col>
        <a-col :span="24">报送文件</a-col>
        <a-col :span="24">
         
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import dictMixin from "@/mixins/dictMixin";

const columns = [
  {
    title: "受理状态",
    dataIndex: "businessStatus",
    key: "businessStatus",
    width: 120,
    customRender: (text, record, index) => {
      console.log(text);
      return text == 0
        ? "暂存"
        : text == 1
        ? "已上报"
        : text == 2
        ? "直接办结"
        : "其他";
    },
  },
  {
    title: "督办状态",
    dataIndex: "dubanStatus",
    key: "dubanStatus",
    width: 120,
    customRender: (text, record, index) => {
      console.log(text);
      return text == 0
        ? "未督办"
        : text == 1
        ? "已督办"
        : "未督办";
    },
  },
  {
    title: "紧急程度",
    dataIndex: "urgencyLevel",
    key: "urgencyLevel",
    width: 120,
    customRender: (text, record, index) => {
      console.log(text);
      return text == 0
        ? "一般"
        : text == 1
        ? "优先"
        : text == 2
        ? "紧急"
        : "";
    },
  },
  {
    title: "办理状态",
    dataIndex: "eventStatus",
    key: "eventStatus",
    width: 120,
    customRender: (text, record, index) => {
      return text == 1
        ? "待指挥中心派遣"
        : text == 2
        ? "待部门受理"
        : text == 3
        ? "部门派遣"
        : text == 4
        ? "部门办结审核"
        : text == 5
        ? "指挥中心审核"
        : text == 50
        ? "返工"
        : text == 51
        ? "结案"
        : text == 6
        ? "归档"
        : text == 7
        ? "已回访"
        : "其他";
    },
  },
  {
    title: "问题描述",
    dataIndex: "issueDescription",
    key: "issueDescription",
    width: 180,
  },
  {
    title: "问题来源",
    dataIndex: "issueSource",
    key: "issueSource",
    width: 180,
  },
  {
    title: "问题类型",
    dataIndex: "issueType",
    key: "issueType",
    width: 180,
  },
  {
    title: "关联对象名称",
    dataIndex: "relatedObjectName",
    key: "relatedObjectName",
    width: 140,
  },
  {
    title: "上报人姓名",
    dataIndex: "reporterName",
    key: "reporterName",
    width: 120,
  },
  {
    title: "上报人电话",
    dataIndex: "reporterPhone",
    key: "reporterPhone",
    width: 120,
  },
  {
    title: "上报时间",
    dataIndex: "reportTime",
    key: "reportTime",
    width: 120,
  },
  {
    title: "处理人用户名",
    dataIndex: "processUserName",
    key: "processUserName",
    width: 120,
  },
  {
    title: "操作",
    key: "action",
    fixed:'right',
    scopedSlots: { customRender: "action" },
  },
];
const data = [
  {
    name: "工作任务1",
    id: "202310221020",
    lx: "工作类型1",
    dw: "单位1",
    lxr: "联系人1",
    startTime: "24.11.03 10:20",
    endTime: "24.11.03 10:21",
  },
  {
    name: "工作任务2",
    id: "202310221020",
    lx: "工作类型2",
    dw: "单位2",
    lxr: "联系人2",
    startTime: "24.11.03 10:20",
    endTime: "24.11.03 10:21",
  },
];
export default {
  mixins: [dictMixin],
  data() {
    return {
      activeName: "first",
      dialogVisible: false,
      dialogVisible1: false,
      dialogImageUrl: "",
      dialogVisibleimg: false,
      disabled: false,
      data: "",
      input: "",
      value: "",
      textarea: "",
      columns,
      data,
      queryForm: {
        current: 10,
        offset: 1,
        search: '',
        pqStatus: 30, //30:派遣待确认 31:派遣已确认 33:已解决待审核 40:审核驳回返工
        eventStatus: '',
        urgencyLevel: '',
        issueSource: '',
        issueType: '',
        startTime:'',
        endTime:''
      },
      menuList: [
        { label: "待确认", value: 30 },
        { label: "已确认", value: 31 },
        { label: "待审核", value: 33 },
        { label: "审核驳回", value: 40 },
      ],
      businessList: [
        { label: "暂存", value: 0 },
        { label: "已上报", value: 1 },
        { label: "直接办结", value: 2 },
      ],
      urgencyLevelList: [
        { label: "一般", value: 0 },
        { label: "优先", value: 1 },
        { label: "紧急", value: 2 },
      ],
      eventList: [
        { label: "待指挥中心派遣", value: 1 },
        { label: "待部门受理", value: 2 },
        { label: "部门派遣", value: 3 },
        { label: "部门办结审核", value: 4 },
        { label: "指挥中心审核", value: 5 },
        { label: "返工", value: 50 },
        { label: "结案", value: 51 },
        { label: "归档", value: 6 },
        { label: "已回访", value: 7 },
      ],
      tableData:[],
      loading:false,
      imageUrl:'',
      total:0
    };
  },
  mounted(){
    this.getList();
    this.getDictData({
      code: "QUESTION_SOURCE_CODE", // 问题来源
      name: "issueSourceList",
    });
    this.getDictData({
      code: "QUESTION_TYPE_CODE", // 问题类型
      name: "issueTypeList",
    });
  },
  methods: {
     // 分页
    onShowSizeChange(current, pageSize) {
      this.queryForm.offset = current;
      this.queryForm.current = pageSize;
      this.getList();
    },
    pageChange(current) {
      this.queryForm.offset = current;
      this.getList();
    },
    changeTab(e) {
      this.tabsValue = e;
      this.queryForm.pqStatus = e;
      this.queryForm.current = 20;
      this.queryForm.offset = 1;
      this.getList();
    },
    async getList() {
      try {
        this.loading = true;

        // 使用模板字符串提高可读性
        const baseUrl = '/government-platform-center/case/getMyPaiqianTask';
        const res = await this.$axios.post(baseUrl,this.queryForm,
          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
        );
        if (res.data.code !== 0) {
          throw new Error("请求失败: " + res.data.message);
        }

        // this.tableData = res.data.data;
        this.total = res.data.total;

        // 使用 Promise.all 并行处理所有用户请求
        this.tableData = await Promise.all(
          res.data.data.map(async (item,index) => ({
            ...item,
            key:index+1
            // 直接添加 pusherUserName 字段到每行数据
            // pusherUserName: await this.getUser(item.pusherUserId),
          }))
        );

        console.log("处理后的用户列表:", this.tableData);
      } catch (error) {
        console.error("获取列表失败:", error);
        this.$message.error("数据加载失败");
      } finally {
        this.loading = false;
      }
    },
    // 正确返回 Promise 的方法
    getUser(id) {
      return this.$axios
        .get("/government-platform-center/user/getUserInfo?userId=" + id)
        .then((res) => {
          return res.data.data.userName;
        })
        .catch((error) => {
          // 建议添加错误处理
          console.error("获取用户失败:", error);
          return "未知用户"; // 返回默认值
        });
    },
    search() {
      this.tableData = [];
      this.queryForm.offset = 1;
      this.getList();
    },
    reset() {
      this.tableData = [];
      this.queryForm =  {
        current: 10,
        offset: 1,
        search: '',
        pqStatus: this.queryForm.pqStatus, //30:派遣待确认 31:派遣已确认 33:已解决待审核 40:审核驳回返工
        eventStatus: '',
        urgencyLevel: '',
        issueSource: '',
        issueType: '',
        startTime:'',
        endTime:''
      }
      this.getList();
    },
    beforeUpload() {},
    handleClick(row) {
      console.log(row);

      this.data = row;
      this.dialogVisible = true;
    },
    handleClick1(row) {
      this.data = row;
      this.dialogVisible1 = true;
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    // 查看详情 D:\项目\govement-platform\src\view\control\Home
    handleOperation(row, type) {
      // 实现查看详情逻辑
      this.$router.push({
        path: "/control/daibanDetail",
        query: {
          id: row.eventId,
          operationType: type,
          pageType: 'wdrw', //'this.pageType,
        },
      });
    },
  },
};
</script>
<style scoped>
.ant-row {
  border-radius: 5px;
  margin-bottom: 15px;
  background: #fff;
  padding: 20px;
  color: #000;
}

/deep/ .ant-table-thead > tr > th {
  color: #000;
  font-weight: bold;
}

/deep/ .ant-table-tbody > tr > td {
  color: #000;
}

.ant-col {
  margin: 10px 0;
}

.ant-select {
  width: 60%;
}

.ant-input {
  width: 60%;
}

/deep/ .el-table thead {
  color: black;
  font-weight: bold;
  background: #fafafa;
}

/deep/ .el-table th.el-table__cell {
  background: #fafafa;
}

@media screen and (max-width: 1750px) {
  .el-input {
    width: 60%;
  }

  .el-select {
    width: 60%;
  }
}

@media screen and (max-width: 1300px) {
  .el-input {
    width: 70%;
  }

  .el-select {
    width: 70%;
  }

  .app {
    width: calc(100% - 50px);
  }
}

@media screen and (max-width: 1100px) {
  .el-input {
    width: 90%;
  }

  .el-select {
    width: 90%;
  }
}
.table {
  width: 100%;
  overflow-x: auto !important;
}

/* 添加表格原生滚动条样式 */
::v-deep .ant-table-body {
  overflow-x: auto !important;
  /* overflow-y: auto !important; */
  /* max-height: 500px; 设置最大高度，超出时显示垂直滚动条 */
}

/* 确保使用原生滚动条样式 */
::v-deep .ant-table-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::v-deep .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 4px;
}

::v-deep .ant-table-body::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

/* 修复固定列的问题 */
::v-deep .ant-table-fixed-right {
  right: 0px; /* 为滚动条留出空间 */
}
</style>
